<template>
	<view class="jingxuan">
		<view class="sousuo">
			<input type="text" placeholder="输入关键词" @confirm="confirm">
		</view>
			<view class="jingxuan-anniu">
				<view class="anniu-jvbao" @click="to_jvbao">
					<image src="../../static/icon/jvbao.png" mode=""></image>
					<view class="anniu-word">
						我要举报
					</view>
				</view >
				<view class="anniu-yujing" @click="to_yujing">
					<image src="../../static/icon/yujing.png" mode=""></image>
					<view class="anniu-word">
						来电预警
					</view>
				</view>
				<view class="anniu-zhushou" @click="to_zhushou">
					<image src="../../static/icon/zhushou.png" mode=""></image>
					<view class="anniu-word">
						反诈助手
					</view>
				</view>
				<view class="anniu-baodian" @click="to_baodian">
					<image src="../../static/icon/baodian.png" mode=""></image>
					<view class="anniu-word">
						反诈宝典
					</view>
				</view>
				<view class="anniu-shoucang" @click="to_shoucang">
					<image src="../../static/icon/shoucang.png"></image>
					<view class="anniu-word">
						同步收藏
					</view>
				</view>
			</view>
			<view class="lunbo">
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item>
						<view class="swiper-item">
							<image src="http://123.157.242.136:8089/zlj/shouye/lunbo/lb1.png" mode=""></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<image src="http://123.157.242.136:8089/zlj/shouye/lunbo/lb2.png" mode=""></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<image src="http://123.157.242.136:8089/zlj/shouye/lunbo/lb3.png" mode=""></image>
						</view>
					</swiper-item>
					
				</swiper>
			</view>
			<view class="jingxuan-anniu2">
				<button class="jingxuan-btn" @click="to_daka">
					<image src="../../static/icon/daka.png" mode=""></image>
					<view class="btn-word">
						每日打卡
					</view>
					</button>
				<button class="jingxuan-btn" @click="to_xinli">
					<image src="../../static/icon/xinli.png" mode=""></image>
					<view class="btn-word" >
						心理自测
					</view>
					</button>
				<button class="jingxuan-btn">
					<image src="../../static/icon/youxi.png"  mode=""></image>
					<view class="btn-word">
						反诈游戏
					</view>
					</button>
					
			</view>
			
				<view class="fanzhaxuanchuan">
					<container title='反诈宣传'>
							<ls-swiper :list="base_lsit" imgKey="imgUrl" :crown="true" :loop="true" :shadow='true' height='130' previousMargin="120"
							 nextMargin='120' imgRadius="5" />
						</container>
					<view class="xuanchuan-box" v-for="(item,index) in xuanchuandata"  @click="to_xuanchuan1(index)">
						<view class="box-word1">
							<h4>{{item.tip}}</h4>
						</view>
						<view class="box-word2">
							天下无诈 app 
						</view>
						<view class="box-word3">
							{{item.time}}{{inx}}
						</view>
						<image :src="item.imgUrl" mode=""></image>
					</view>
					
				</view>
			 
		</view>
		
</template>

<script>
	import UniStatusBar from '../uni-status-bar.vue'
	import api from '../../api/index.js'
	import container from '../../components/container/index.vue'
	import LsSwiper from '../../components/ls-swiper/index.vue'
	export default {
		components: {
			container,
			LsSwiper,
			UniStatusBar
		},
		data() {
			return {
				title: 'Hello',
				base_lsit: [],
				xuanchuandata:[],
				inx:''
			}
		},
		mounted() {
			var that = this;
			uni.request({
				url: 'http://127.0.0.1:8080/xuanchuan/xuanchuanlist', //仅为示例，并非真实接口地址。
				method: 'GET',
				dataType: 'json',
				data: {
					
				},
				header: {
					// 'custom-header': 'hello' //自定义请求头信息
				},
				success: (res) => {
					// console.log(res.data.data);
					that.xuanchuandata = res.data.data;
					// console.log(that.luntanLists);
					console.log(that.xuanchuandata);
				}
			});
			this.getBase()
		},
		methods: {
			confirm() {
					uni.showToast({
						title: '搜索'
					})
			},
			getBase() {
				api.base(100).then(res => {
					this.base_lsit = res
				})
			},
			clickItem(data) {
				console.log(data)
			},
			to_jvbao(){
				uni.navigateTo({
					url:"../shouye/anniu/jvbao"
				})
			},
			to_yujing(){
				uni.navigateTo({
					url:"../shouye/anniu/yujing"
				})
			},
			to_baodian(){
				uni.navigateTo({
					url:"../shouye/anniu/baodian"
				})
			},
			to_zhushou(){
				uni.navigateTo({
					url:"../shouye/anniu/zhushou"
				})
			},
			to_shoucang(){
				uni.navigateTo({
					url:"../shouye/anniu/shoucang"
				})
			},
			to_xinli(){
				uni.navigateTo({
					url:"../shouye/anniu/xinli"
				})
			},
			to_daka(){
				uni.navigateTo({
					url:"../shouye/anniu/daka"
				})
			},
			to_xuanchuan1(e){
				uni.navigateTo({
					
					url:"../../pages/shouye/anniu/xuanchuan/xuanchuan1?xx="+e,
					
				})
			}
		}
	}
</script>

<style>
	.jingxuan{
		padding-bottom: 80px;
	}
	/* 轮播图 */
	
	.lunbo swiper {
		width: 93%;
		height: 300rpx;
	margin:auto;
	margin-top: 20rpx;
	}
	
	.lunbo swiper image {
		width: 100%;
		height: 300rpx;
	}
	.sousuo{
		border: 1px solid #000000;
		margin:auto;
		width: 80%;
		height: 45rpx;
		border-radius: 30rpx;
		background-color: #ffffff;
		text-align: center;
		padding: 5px;
	}
	page {
		background-image: url(@/static/bg.png) ;
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: 100% 100%;
	}
	*{
		padding: 0%;
		margin: 0%;
	}
	image{
		display: flex;
	}
	.input-view {
		float: left;
		width:75%;
		background-color: #ffffff;
		height: 30px;
		border-radius: 15px;
		padding: 0 15px;
		margin:15rpx 7.5%;
		text-align: center;
		line-height: 30px;
		
	}
	
	.input-uni-icon {
		
		line-height: 30px;
		float: left;
	}
	
	.nav-bar-input {
		
		height: 30px;
		line-height: 30px;
		/* #ifdef APP-PLUS-NVUE */
		width: 370rpx;
		/* #endif */
		padding: 0 5px;
		background-color: #ffffff;
		
		
	}
	.phcolor{
		color: #8c8c8c;
	}
	.sousuo-input{
		width: 80%;
		height: 50rpx;
		border: #8c8c8c 1px solid;
	}
	.right-icon{
		/* border: #007AFF solid; */
		width: 60rpx;
		height: 60rpx;
		float: right;
		margin: 20rpx 30rpx;
	}
	.fanzhaxuanchuan{
		background-color: white;
	}
	.jingxuan-anniu{
		width: 92%;
		display: flex;
		text-align: center;
		justify-content: space-around;
		margin:30rpx auto;
		color: #ffffff;
		font-size: 10rpx;
	}
	.jingxuan-anniu image{
		height:60rpx;
		width: 60rpx;
		
	}
	.anniu-word{
		margin-top: 10rpx;
	}
	.jingxuan-anniu2{
		width: 92%;
		height: 80rpx;
		margin: auto;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
		position: relative;
	}
	.jingxuan-anniu2 image{
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		top: 12rpx;
		left: 8rpx;
	}
	.jingxuan-btn{
		border-radius: 30rpx;
		width:200rpx;
		height: 80rpx;
		font-size: 30rpx;
		
	}
	.btn-word{
		margin-left: 60rpx;
		font-size: 28rpx;
		margin-top: 2rpx;
	}
	.xuanchuan-word{
		width: 92%;
		margin: auto;
		margin-top: 20rpx;
		font-weight: bold;
	}
	.xuanchuan-box{
		width: 92%;
		height: 180rpx;
		border: #8c8c8c 1px solid;
		margin:30rpx auto;
		border-radius: 20rpx;
		box-shadow: #8c8c8c 5rpx 5rpx;
		position: relative;
		background-color: #ffffff;
	}
	.box-word1{
		width: 465rpx;
		height: 83rpx;
		font-size: 30rpx;
		overflow: hidden;
		position: absolute;
		top: 40rpx;
		left: 40rpx;
	}
	.box-word2{
		color: #c3c3c3;
		font-size: 10rpx;
		position: absolute;
		top: 130rpx;
		left: 40rpx;
	}
	.box-word3{
		color: #c3c3c3;
		font-size: 10rpx;
		position: absolute;
		top: 130rpx;
		left:200rpx;
	}
	.xuanchuan-box image{
		width: 130rpx;
		height: 130rpx;
		position: absolute;
		top: 28rpx;
		right: 40rpx;
		border-radius: 20rpx;
	}
	.bottom{
		height: 200rpx;
	}
	 .status_bar {
	        height: var(--status-bar-height);
	        width: 100%;
	}
</style>
